<script lang="ts">
  import { Icon } from "@component/icons";
  import {
    getDatasetAnnotationSubscribe,
    DatasetAnnotationFactory,
  } from "@store/entity/dataset/annotation";
  import type { PageData } from "./$types";
  import { currentDataset$ } from "@store/entity/dataset";
  import { createDatasetAnnotation, updateDatasetAnnotation, listDatasetAnnotations } from "@service/dataset/annotation";
  import { DataTable, convToDataSource } from "@component/table";
  export let data: PageData;
  let pageSize = 100;
  let isEditing: boolean;
  let label: string;

  $: entryAnnotations$ = getDatasetAnnotationSubscribe(data.entryId)
  $: entryAnnotationsDataSource = convToDataSource(
    $entryAnnotations$?.rows,
    $entryAnnotations$?.total,
    undefined,
    pageSize
  );
  $: myEntryAnnotation = ($entryAnnotations$?.rows||[]).find(v => v.my_annotation_flag) || DatasetAnnotationFactory($currentDataset$.id, data.entryId)();
  $: isAddNew = !myEntryAnnotation.id;
  $: {
    console.log('data.entryId:', data.entryId);
    listDatasetAnnotations($currentDataset$.code, {dataset_entry_id: data.entryId}, false)
  }

  // $: {
  //   listDatasetAnnotations($currentDataset$.code, {dataset_entry_id: data.entryId}, false)
  //   console.log('entryAnnotationsDataSource=>', entryAnnotationsDataSource)
  // }
  
  function enterEditMyAnnotation() {
    label = myEntryAnnotation.label
    isEditing = true;
  }
  async function saveMyAnnotation() {
    if (!label) {
      console.warn("no label to save...")
      isEditing = false;
      return
    }
    if (isAddNew) {
      await createDatasetAnnotation($currentDataset$.code, { dataset_id: $currentDataset$.id, entry_id: data.entryId, label})
      listDatasetAnnotations($currentDataset$.code, {dataset_entry_id: data.entryId}, false)
    } else {
      updateDatasetAnnotation($currentDataset$.code, data.entryId, { id: myEntryAnnotation.id, label}, true)
    }
    isEditing = false;
  }
  function cancel() {
    isEditing = false;
  }
</script>

<div class="flex-container items-start w-full flex-col h-full">
  <div class="h-32 flex-col w-full">
    <h2 class="h-8 flex-container items-start justify-start">我的标注
      <!-- svelte-ignore a11y-missing-attribute -->
      <!-- svelte-ignore missing-declaration -->
      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <a class="cursor-pointer" on:click={enterEditMyAnnotation}><Icon name="pencil-alt" size="sm+" className="ml-2"  /></a>
    </h2>
    <div class="h-24">
      {#if isEditing}
        <div class="p-2">
          <button class="tab-btn" on:click={saveMyAnnotation}>保存</button>
          <button class="tab-btn" on:click={cancel}>取消</button>
        </div>
        <textarea rows="2" name="label" bind:value={label} class="modal-input" placeholder="128个字以内" />
      {:else}
        {#if isAddNew}
          <div class="flex-center-box w-full h-full">
            <button class="tab-btn" on:click={enterEditMyAnnotation}>创建简易标注</button>
          </div>
        {:else}
          <div class="break-words break-all text-gray-400">
            {myEntryAnnotation.label}
          </div>
        {/if}
      {/if}
    </div>
  </div>
  <div class="justify-start italic w-full grow flex-none text-sm pt-4">
    <h2>全部标注</h2>
    <DataTable
        cols={data.entryAnnotationCols}
        ds={entryAnnotationsDataSource}
      />
  </div>
</div>
